<template>

  <div>

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>


    <el-card style="margin-top: 2%">
      <el-input style="width: 20%"
                placeholder="请输入菜单名称"
                v-model="menu.title">
      </el-input>

      <el-button type="primary">搜索</el-button>
      <el-button type="primary"@click="dialogVisible = true">添加</el-button>

      <hr style="border: 1px;background-color: red"/>
      <el-table :header-cell-style="{background:'darkcyan',color:'white'}"
        :data="menu" :border="true"
        style="width: 100%;">
        <el-table-column
          label="id"
          prop="id">
        </el-table-column>

        <!--    <el-table-column label="id" prop="id">-->

        <!--    </el-table-column>-->
        <el-table-column label="标题" prop="title">

        </el-table-column>
        <el-table-column label="路径" prop="path">

        </el-table-column>
        <el-table-column label="图标" prop="icon">

        </el-table-column>
        <el-table-column label="父菜单id" prop="parentid">

        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      title="添加菜单"
      :visible.sync="dialogVisible"
      width="50%"
      style="height: 100%"
      center>

      <AddMenu @closeDialog="handleclose"></AddMenu>

    </el-dialog>

  </div>
</template>

<script>
import instance from "../../utils/request";
import AddMenu from "./AddMenu";

export default {
  name: "List",
  components: {AddMenu},
  data(){
    return{
      dialogVisible: false,
      menu:[
        {
          id:'',
          title:'',
          path:'',
          icon:'',
          parentid:''
        }
      ]
    }

  },

  created() {
    instance.get("/user/getMenuList").then(res=>{
      console.log(res.data);
        this.menu=res.data.list;
    }).catch(err=>{
      alert("后台服务器错误");
    })
  },
  methods: {
    handleclose(){
      this.dialogVisible = false;
    }
  }

}
</script>

<style scoped>

</style>
